<template>
  <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
    <a-form-item
      field="murl"
      label="原密码"
      validate-trigger="blur"
      asterisk-position="end">
      <a-input-password
        v-model="formData.murl"
        placeholder="请输入原密码"
        :input-attrs="{ autocomplete: 'off' }" />
    </a-form-item>
    <a-form-item
      field="old_password"
      label="原密码"
      validate-trigger="blur"
      asterisk-position="end">
      <a-input-password
        v-model="formData.old_password"
        placeholder="请输入原密码"
        :input-attrs="{ autocomplete: 'off' }" />
    </a-form-item>
    <a-form-item
      field="new_password"
      label="新密码"
      validate-trigger="blur"
      asterisk-position="end"
      class="new_password-form-item">
      <a-input-password
        v-model="formData.new_password"
        placeholder="请输入新密码"
        @blur="handleNewPwdBlur" />
    </a-form-item>
    <a-form-item
      field="confirm_password"
      label="确认新密码"
      validate-trigger="blur"
      asterisk-position="end"
      class="mb-0!">
      <a-input-password
        v-model="formData.confirm_password"
        placeholder="请再次输入新密码"
        :input-attrs="{ autocomplete: 'off' }" />
    </a-form-item>
    <a-button type="primary">完成配置</a-button>
  </a-form>
</template>
<script setup lang="ts">
// import { useAppStore } from '@/stores/app'
import { type FieldRule, type FormInstance } from '@arco-design/web-vue'

// const loading = ref(false)

// const appStore = useAppStore()
const formRef = ref<FormInstance>()

const formData = reactive<any>({
  murl: '',
  old_password: '',
  new_password: '',
  confirm_password: ''
})

const rules = computed<Record<string, FieldRule[]>>(() => {
  const res: Record<string, FieldRule[]> = {
    murl: [{ required: true, message: '请输入管理端地址' }],
    old_password: [
      {
        required: true,
        validator: validatePassword
      }
    ],
    new_password: [
      {
        required: true,
        message: '密码不能为空'
      },
      {
        validator(value, callback: (error?: string) => void) {
          if (value === formData.old_password) {
            return callback('新密码不能与原密码相同')
          }
        }
      },
      {
        validator: validatePassword
      }
    ],
    confirm_password: [
      {
        required: true,
        validator(value, callback) {
          if (!value) {
            return callback('请再次输入新密码')
          }

          if (value !== formData.new_password) {
            return callback('两次密码输入不一致')
          }
          return callback()
        }
      }
    ]
  }
  return res
})

const handleNewPwdBlur = () => {
  if (formData.confirm_password) {
    formRef.value?.validateField('confirm_password')
  }
}
</script>
